

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>CSS笔记-1 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="CSS笔记-1">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-04 16:49" pubdate>
        2021年9月4日 下午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      7.5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      95
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">CSS笔记-1</h1>
            
            <div class="markdown-body">
              <h1 id="CSS基础"><a href="#CSS基础" class="headerlink" title="CSS基础"></a>CSS基础</h1><h2 id="CSS：Cascading-Style-Sheet（层叠样式表）"><a href="#CSS：Cascading-Style-Sheet（层叠样式表）" class="headerlink" title="CSS：Cascading Style Sheet（层叠样式表）"></a>CSS：Cascading Style Sheet（层叠样式表）</h2><h2 id="CSS基本三要素"><a href="#CSS基本三要素" class="headerlink" title="CSS基本三要素"></a>CSS基本三要素</h2><h3 id="1-统一性："><a href="#1-统一性：" class="headerlink" title="1.统一性："></a>1.统一性：</h3><blockquote>
<p><strong>统一性指的是使用统一的样式属性来设置所有的HTML标签。即在标签中添加style属性</strong></p>
</blockquote>
<h3 id="2-便捷性："><a href="#2-便捷性：" class="headerlink" title="2.便捷性："></a>2.便捷性：</h3><blockquote>
<p>CSS的便捷性主要体现在解决了样式代码的重复（代码冗余量过大）的问题，CSS的基础语法里面提供了丰富多样的选择器，我们可以通过这些<strong>选择器</strong>来单个或批量的选择页面上面的HTML元素</p>
</blockquote>
<h3 id="3-分离性："><a href="#3-分离性：" class="headerlink" title="3.分离性："></a>3.分离性：</h3><blockquote>
<p>CSS的分离性主要体现的是结构代码与样式代码能够进行分离</p>
</blockquote>
<h2 id="1-选择器"><a href="#1-选择器" class="headerlink" title="1.选择器"></a>1.选择器</h2><h3 id="1-分组选择器"><a href="#1-分组选择器" class="headerlink" title="1.分组选择器"></a>1.分组选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">h1</span>,<span class="hljs-selector-tag">h2</span>&#123;<br>    <span class="hljs-attribute">color</span>:red;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="2-相邻兄弟选择器（CSS3）"><a href="#2-相邻兄弟选择器（CSS3）" class="headerlink" title="2.相邻兄弟选择器（CSS3）"></a>2.相邻兄弟选择器（CSS3）</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*只选择相邻的一个符合条件的弟弟*/</span><br><span class="hljs-comment">/*不选择哥哥 向下为弟弟 向上为哥哥*/</span><br><span class="hljs-selector-tag">h1</span>+<span class="hljs-selector-tag">p</span>&#123;<br>    <span class="hljs-attribute">color</span>:red;<br>&#125;<br><br><span class="hljs-comment">/*进阶用法--排除第一项*/</span><br><span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span>+<span class="hljs-selector-tag">li</span>&#123;<br>	<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#FF0000</span>;<br>&#125;<br><span class="hljs-comment">/*排除第一项和第二项*/</span><br><span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span>+<span class="hljs-selector-tag">li</span>+<span class="hljs-selector-tag">li</span>&#123;<br>	<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#FF0000</span>;<br>&#125;<br><br>&lt;<span class="hljs-selector-tag">ul</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第一项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第二项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第三项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第四项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第五项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第六项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第七项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>	&lt;<span class="hljs-selector-tag">li</span>&gt;第八项&lt;/<span class="hljs-selector-tag">li</span>&gt;<br>&lt;/<span class="hljs-selector-tag">ul</span>&gt;<br></code></pre></td></tr></table></figure>

<h3 id="3-普通兄弟选择器（CSS3）"><a href="#3-普通兄弟选择器（CSS3）" class="headerlink" title="3.普通兄弟选择器（CSS3）"></a>3.普通兄弟选择器（CSS3）</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*选择h1复合条件的弟弟 不必考虑是否相邻*/</span><br><span class="hljs-comment">/*不选择哥哥*/</span><br><span class="hljs-selector-tag">h1</span>~<span class="hljs-selector-tag">p</span>&#123;<br>	<span class="hljs-attribute">color</span>:red<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="4-伪类选择器"><a href="#4-伪类选择器" class="headerlink" title="4.伪类选择器"></a>4.伪类选择器</h3><blockquote>
<p><strong>伪类与伪元素选择器是CSS当中一种比较特别的选择器，它具体指的是<u>元素的一些特殊状态或特殊位置</u></strong></p>
</blockquote>
<p>CSS3：<code>:target\:not()\属性选择器</code></p>
<h4 id="4-1超链接a标签特有选择器"><a href="#4-1超链接a标签特有选择器" class="headerlink" title="4.1超链接a标签特有选择器"></a>4.1超链接a标签特有选择器</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!--超链接特有 两种伪类的使用--&gt;</span><br><span class="hljs-comment">&lt;!--如果:前的选择器相同 则必须按照 lv ha 的顺序写 否则将失效--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span><br><span class="css">			<span class="hljs-comment">/* 要按照lvha的顺序加四个状态 由love生hate */</span></span><br><span class="css">    		<span class="hljs-comment">/* 链接没点击前 */</span></span><br><span class="css">			<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:link</span> &#123;</span><br><span class="css">				<span class="hljs-attribute">color</span>: black;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-comment">/* 链接被访问后 */</span></span><br><span class="css">			<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:visited</span> &#123;</span><br><span class="css">				<span class="hljs-attribute">color</span>: green;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">color</span>: red;</span><br><span class="css">			&#125; </span><br><span class="css">			<span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:active</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">color</span>: <span class="hljs-number">#0000FF</span>;</span><br><span class="css">			&#125; </span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aaa&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-2-nth-child选择器（CSS3）"><a href="#4-2-nth-child选择器（CSS3）" class="headerlink" title="4.2 :nth-child选择器（CSS3）"></a>4.2 :nth-child选择器（CSS3）</h4><blockquote>
<p><code>:nth-child(xn+y)</code>根据指定的公式选取指定的元素</p>
<ul>
<li>当x=0时，公式变为<code>nth-child(y)</code>这代表选取第y项子元素</li>
<li>当x=1时，公式变为<code>nth-child(n+y)</code>，这代表从第y项选取，一直到最后一项</li>
<li>当x=-1时，公式变为<code>nth-child(-n+y)</code>,这代表选取前y项的元素</li>
<li>当x&gt;1时，公式变为<code>nth-child(xn+y)</code>，这代表子元素按x个进行分组，再取每个分组的第y项</li>
</ul>
<p>除了里面的公式<code>xn+y</code>，还可以设置两个常量参数，分别是<code>odd</code>代表奇数，<code>even</code>偶数</p>
</blockquote>
<blockquote>
<p><strong>注意：当x==y时，y可以省略</strong></p>
<p><strong>常用于：子元素相同类型，不同类型使用nth-of-type</strong></p>
</blockquote>
<h4 id="4-3-nth-of-type选择器"><a href="#4-3-nth-of-type选择器" class="headerlink" title="4.3 :nth-of-type选择器"></a>4.3 :nth-of-type选择器</h4><blockquote>
<p><strong>区别：</strong></p>
<p>:nth-child()  先找元素再对比前面的标签类型</p>
<p>:nth-of-type() 先对比前面的标签类型再找元素</p>
</blockquote>
<h4 id="4-4-focus-within"><a href="#4-4-focus-within" class="headerlink" title="4.4 :focus-within"></a>4.4 :focus-within</h4><blockquote>
<p>当子元素触发了<code>focus</code>时，触发此选择器</p>
</blockquote>
<h3 id="伪元素本身并不多，经常使用的就更少"><a href="#伪元素本身并不多，经常使用的就更少" class="headerlink" title="伪元素本身并不多，经常使用的就更少"></a>伪元素本身并不多，经常使用的就更少</h3><ol>
<li><code>::before/::after</code>（CSS3）</li>
<li><code>::first-line</code></li>
<li><code>::first-letter</code></li>
<li><code>::selection</code>  <strong>必须双冒号</strong></li>
<li><code>::placeholder</code></li>
<li><code>::backdrop</code> <strong>用于设置视频背景处的颜色</strong></li>
</ol>
<hr>
<h3 id="！！！重点伪类选择器和伪元素选择器的区别"><a href="#！！！重点伪类选择器和伪元素选择器的区别" class="headerlink" title="！！！重点伪类选择器和伪元素选择器的区别"></a>！！！重点伪类选择器和伪元素选择器的区别</h3><h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><blockquote>
<p><strong>伪类</strong>选择器相当于在标签中添加一个<strong>看不见的类</strong></p>
<p><strong>伪元素</strong>选择器相当于在标签内部添加一个<strong>看不见的标签</strong></p>
</blockquote>
<h4 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h4><ol>
<li>伪类我们使用<code>:</code>来表示 ，伪元素使用<code>::</code>来表示 （在低版本的浏览器里面它们有严格区分，在高版本的浏览器里面已经可以互相兼容了）<strong>部分伪元素必须使用双冒号：::selection、::backdrop</strong></li>
<li>如果在一个选择器里面，伪类与伪元素同时出现了，则<strong>伪元素选择器必须放在最后面</strong></li>
<li>在同一个选择器里面<strong>伪类选择器可以叠加使用</strong>，而<strong>伪元素选择器是不可以叠加的</strong></li>
</ol>
<hr>
<h3 id="！！！重点-选择器面试题"><a href="#！！！重点-选择器面试题" class="headerlink" title="！！！重点 选择器面试题"></a>！！！重点 选择器面试题</h3><blockquote>
<ol>
<li>^以什么开头</li>
<li>$以什么结尾</li>
<li>*包含什么</li>
</ol>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*属性选择器的高级应用*/</span><br>	<span class="hljs-comment">/* 以a开始的为斜体 */</span><br>			<span class="hljs-selector-tag">h3</span><span class="hljs-selector-attr">[class^=<span class="hljs-string">&quot;a&quot;</span>]</span>&#123;<br>				<span class="hljs-attribute">font-style</span>: italic;<br>			&#125;<br>			<span class="hljs-comment">/* 以a结尾的为红色 */</span><br>			<span class="hljs-selector-tag">h3</span><span class="hljs-selector-attr">[class$=<span class="hljs-string">&quot;a&quot;</span>]</span>&#123;<br>				<span class="hljs-attribute">color</span>: red;<br>			&#125;<br>			<span class="hljs-comment">/* 包含a的设置字体大小为32px */</span><br>			<span class="hljs-selector-tag">h3</span><span class="hljs-selector-attr">[class*=<span class="hljs-string">&quot;a&quot;</span>]</span>&#123;<br>				<span class="hljs-attribute">font-size</span>: <span class="hljs-number">32px</span>;<br>			&#125;<br>			<br>			<span class="hljs-comment">/* 根据链接的结尾来进行选择 */</span><br>			<span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href$=<span class="hljs-string">&quot;.com&quot;</span>]</span>&#123;<br>				<span class="hljs-attribute">color</span>: red;<br>			&#125;<br>			<span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href$=<span class="hljs-string">&quot;.cn&quot;</span>]</span>&#123;<br>				<span class="hljs-attribute">color</span>: blue;<br>			&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 面试题</span><br><span class="hljs-comment">	class以a开始的斜体</span><br><span class="hljs-comment">	class以a结尾的红色</span><br><span class="hljs-comment"> --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;aa&quot;</span>&gt;</span>大大阿达<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ab&quot;</span>&gt;</span>哈哈哈哈<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ac&quot;</span>&gt;</span>噢噢噢噢<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ad&quot;</span>&gt;</span>呵呵呵呵<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ba&quot;</span>&gt;</span>嘿嘿嘿黑<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ca&quot;</span>&gt;</span>牛蛙牛蛙<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;da&quot;</span>&gt;</span>厉害厉害<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;gaz&quot;</span>&gt;</span>加大加大1<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ggz&quot;</span>&gt;</span>加大加大2<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><br><span class="hljs-comment">&lt;!-- </span><br><span class="hljs-comment">	.com结尾的为红色</span><br><span class="hljs-comment">	.cn结尾的为蓝色</span><br><span class="hljs-comment"> --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.hhh.cn&quot;</span>&gt;</span>不知道啥网站<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>		<br></code></pre></td></tr></table></figure>

<h2 id="2-CSS常见样式"><a href="#2-CSS常见样式" class="headerlink" title="2.CSS常见样式"></a>2.CSS常见样式</h2><h3 id="2-1颜色相关"><a href="#2-1颜色相关" class="headerlink" title="2.1颜色相关"></a>2.1颜色相关</h3><blockquote>
<p><strong>网页对十六进制的颜色兼容性最高 优先使用十六进制</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>枚举色--英文单词<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color:pink;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>			<br><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>十六进制颜色<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: #666;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-comment">&lt;!-- #000000 前两个0代表红色 中间两个0代表绿色 后边两个0代表蓝色 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: #808080;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>rgb三原色 red green blue<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>rgba 三原色 red green blue alpha<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: rgba(0,0,0,0.5);&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>Url统一资源定位符</strong></p>
</blockquote>
<h3 id="2-2背景相关"><a href="#2-2背景相关" class="headerlink" title="2.2背景相关"></a>2.2背景相关</h3><p><strong>background-position</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*位置有 left center right top bottom 五个值*/</span><br><span class="hljs-attribute">background-position</span>: top right;   <span class="hljs-comment">/*设置 右上*/</span><br></code></pre></td></tr></table></figure>

<p><strong>background-size</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*contain包含的意思，让盒子能够完全的包含住背景图片，这个时候图片是能够完整显示的*/</span><br><span class="hljs-attribute">background-size</span>: contain;<br><span class="hljs-comment">/*cover覆盖的意思，这个时候背景图片完全覆盖住盒子，图片有可能会显示不完成*/</span><br><span class="hljs-attribute">background-size</span>: cover;<br></code></pre></td></tr></table></figure>

<h4 id="2-2-1-扩展–背景设置多图"><a href="#2-2-1-扩展–背景设置多图" class="headerlink" title="2.2.1!!!扩展–背景设置多图"></a><strong>2.2.1!!!扩展–背景设置多图</strong></h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*设置多图时 以从右到左的顺序进行渲染 即左边可以覆盖右边*/</span><br><span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">img/02.png</span>), <span class="hljs-built_in">url</span>(<span class="hljs-string">./img/item33.png</span>);<br><span class="hljs-comment">/*通过逗号隔开可以分别设置 多图的属性*/</span><br><span class="hljs-attribute">background-repeat</span>:no-repeat,no-repeat;<br><span class="hljs-attribute">background-size</span>:<span class="hljs-number">300px</span> <span class="hljs-number">300px</span>,cover;<br><span class="hljs-attribute">background-position</span>:center center,left top;<br></code></pre></td></tr></table></figure>

<h3 id="2-3字体相关"><a href="#2-3字体相关" class="headerlink" title="2.3字体相关"></a>2.3字体相关</h3><blockquote>
<p><strong>基本上所有与文字相关的属性都是以<code>text</code>开头的，所有与字体相关的属性都是由<code>font</code>开头的</strong></p>
</blockquote>
<p>**网页当中默认的字体大小是<code>16px</code>或<code>12pt(字号)</code>**（网页当中为什么默认字体是<code>16px</code>，是因为<code>html</code>的字体是<code>16px</code>）</p>
<blockquote>
<p><strong>!!!注意：网页字体最小为12px，可以通过缩放比列<code>transform:scale(0.5,1)</code>继续缩小  <u>IE可以一直缩小到0px 而其他的浏览器有限制</u></strong></p>
</blockquote>
<p>字体的单位除了<code>px</code>与<code>pt</code>以外，还有另外几个单位</p>
<ul>
<li><p><strong><code>em</code>代表当前字体的1倍大小<code>1em</code>就相当于当前字体的1倍</strong></p>
</li>
<li><p><code>rem</code>，全称叫<code>root element</code>,中文名称叫根元素，网页当中的根元素是<code>html</code>元素，则<code>1rem</code>相当于1个<code>html</code>的<code>font-size</code>大小</p>
</li>
<li><p><code>vw</code>，全称叫<code>viewport width</code>，中文名称为显示设备的宽度，网页当中<code>1vw</code>代表显示设备<strong>宽度的1%</strong></p>
</li>
<li><p><code>vh</code>，全称叫<code>viewport height</code>，为显示设备的高度，与<code>vw</code>相似</p>
</li>
</ul>
<p><strong>上面的单位当中，<code>px,pt</code>都是固定单位，而<code>rem/vw/vh</code>都称之为响应式单位</strong></p>
<h4 id="2-3-1-font-face自定义字体"><a href="#2-3-1-font-face自定义字体" class="headerlink" title="2.3.1 @font-face自定义字体"></a>2.3.1 @font-face自定义字体</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@font-face</span>&#123;<br>    <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&quot;bgg&quot;</span>;   <span class="hljs-comment">/*设置自定义字体的名字*/</span><br>    <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./fonts/hksn.ttf</span>);  <span class="hljs-comment">/*设置字体文件的位置*/</span><br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="2-3-2-font-weight-设置字体权重"><a href="#2-3-2-font-weight-设置字体权重" class="headerlink" title="2.3.2 font-weight 设置字体权重"></a>2.3.2 font-weight 设置字体权重</h4><ul>
<li><code>lighter</code>字体轻细一点</li>
<li><code>normal</code> 字体正常</li>
<li><code>bold</code>字体加粗【最常见的】</li>
</ul>
<blockquote>
<p><strong>如果一个字体的格式是完整的，那么它应该有9个等级，它的值可以是从100~900，默认是400<code>normal</code>，如果大于500则认为到了<code>bold</code>级别，如果小于<code>400</code>则认为到<code>lighter</code>级别</strong></p>
</blockquote>
<h4 id="2-3-3-设置字体风格–倾斜"><a href="#2-3-3-设置字体风格–倾斜" class="headerlink" title="2.3.3 !!设置字体风格–倾斜"></a>2.3.3 !!设置字体风格–倾斜</h4><p><code>font-style:</code></p>
<ul>
<li><strong><code>italic</code>使用斜体文字(当这个字体有自己的倾斜字体时则使用自己的倾斜字体，如果没有时就默认使用 oblique属性)</strong></li>
<li><strong><code>oblique</code>使文字倾斜</strong></li>
</ul>
<h4 id="2-3-4-text-decoration"><a href="#2-3-4-text-decoration" class="headerlink" title="2.3.4 text-decoration"></a>2.3.4 text-decoration</h4><p><strong>设置文本的装饰样式</strong></p>
<blockquote>
<p><strong>text-decoration 由 <code>text-decoration-line</code>线条的位置、<code>text-decoration-color</code>线条的颜色、<code>text-decoration-style</code>线条的类型三个属性合并而成</strong></p>
</blockquote>
<p><strong><code>text-decoration-line</code>线条的位置</strong></p>
<ul>
<li><code>underline</code>下边</li>
<li><code>overline</code>上边</li>
<li><code>line-through</code>中间，相当于删除线</li>
</ul>
<p><strong><code>text-decoration-style</code>线条的类型</strong></p>
<ul>
<li><code>solid</code>实线</li>
<li><code>dashed</code>虚线</li>
<li><code>dotted</code>点线</li>
<li><code>double</code>双线</li>
<li><code>wavy</code>波浪线</li>
</ul>
<h4 id="2-3-5-text-align-last"><a href="#2-3-5-text-align-last" class="headerlink" title="2.3.5 text-align-last"></a>2.3.5 text-align-last</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">text-align-last</span>:justify; <span class="hljs-comment">/*文字两端对齐【分散对齐】*/</span><br></code></pre></td></tr></table></figure>

<h4 id="2-3-6-文本缩进"><a href="#2-3-6-文本缩进" class="headerlink" title="2.3.6 文本缩进"></a>2.3.6 文本缩进</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">text-indent</span>:<span class="hljs-number">2em</span>; <span class="hljs-comment">/*代表首行缩进2个字符*/</span><br><span class="hljs-comment">/*em可以动态变化 不论字体设置为多大 都表示缩进两个字符*/</span><br></code></pre></td></tr></table></figure>

<h4 id="2-3-7-英文大小写转换"><a href="#2-3-7-英文大小写转换" class="headerlink" title="2.3.7 英文大小写转换"></a>2.3.7 英文大小写转换</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">text-transform</span>: capitalize;<br></code></pre></td></tr></table></figure>

<ul>
<li><strong><code>uppercase</code>大写字母</strong></li>
<li><strong><code>lowercase</code>小写字线</strong></li>
<li><strong><code>capitalize</code>首字母大写</strong></li>
</ul>
<h4 id="2-3-8-文字和单词间距"><a href="#2-3-8-文字和单词间距" class="headerlink" title="2.3.8 文字和单词间距"></a>2.3.8 文字和单词间距</h4><p><code>letter-spacing</code>:字间距</p>
<p><code>word-spacing</code>:单词间距</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 字间距 中英文有效 */</span><br><span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">10px</span>;<br><span class="hljs-comment">/* 单词间距对中文无效 英文有效*/</span><br><span class="hljs-attribute">word-spacing</span>: <span class="hljs-number">10px</span>;<br></code></pre></td></tr></table></figure>

<h3 id="2-4-溢出处理"><a href="#2-4-溢出处理" class="headerlink" title="2.4 溢出处理"></a>2.4 溢出处理</h3><h4 id="2-4-1单行溢出省略"><a href="#2-4-1单行溢出省略" class="headerlink" title="2.4.1单行溢出省略"></a>2.4.1单行溢出省略</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*固定盒子宽度*/</span><br><span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br><span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;<br><span class="hljs-attribute">font-size</span>: <span class="hljs-number">26px</span>;<br><br><span class="hljs-comment">/*关键*/</span><br><span class="hljs-comment">/* nowrap不换行 默认换行 */</span><br><span class="hljs-attribute">white-space</span>: nowrap;<br><span class="hljs-attribute">overflow</span>: hidden;   <span class="hljs-comment">/*超出隐藏*/</span><br><span class="hljs-comment">/* ellipse 椭圆 */</span><br><span class="hljs-comment">/* ellipsis 省略号 */</span><br><span class="hljs-attribute">text-overflow</span>: ellipsis;<br></code></pre></td></tr></table></figure>

<h4 id="2-4-2多行溢出"><a href="#2-4-2多行溢出" class="headerlink" title="2.4.2多行溢出"></a>2.4.2多行溢出</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 多行溢出省略 */</span><br>		<span class="hljs-selector-class">.box2</span>&#123;<br>			<span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;<br>			<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;<br>			<span class="hljs-attribute">font-size</span>: <span class="hljs-number">26px</span>;<br>			<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;<br>			<br>			<span class="hljs-comment">/* 关键代码 */</span><br>			<span class="hljs-attribute">display</span>: -webkit-box; <span class="hljs-comment">/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/</span><br>			-webkit-box-orient: vertical; <span class="hljs-comment">/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/</span><br>			-webkit-line-clamp: <span class="hljs-number">3</span>;  <span class="hljs-comment">/*用来限制在一个块元素显示的文本的行数*/</span><br>			<span class="hljs-attribute">overflow</span>: hidden;<br>			<span class="hljs-attribute">text-overflow</span>: ellipsis;  <span class="hljs-comment">/*省略号*/</span><br>		&#125;<br></code></pre></td></tr></table></figure>

<h3 id="2-5-边框"><a href="#2-5-边框" class="headerlink" title="2.5 边框"></a>2.5 边框</h3><h4 id="2-5-1边框设置"><a href="#2-5-1边框设置" class="headerlink" title="2.5.1边框设置"></a>2.5.1边框设置</h4><p><strong>border：由 border-width，border-style，border-color 三个属性组成</strong></p>
<p><code>border-style</code>用于设置线条的类型</p>
<p>它的类型与之前的属性<code>text-decoration-style</code>非常相似</p>
<ul>
<li><code>solid</code>实线</li>
<li><code>dashed</code>虚线</li>
<li><code>dotted</code>点线</li>
<li><code>double</code>双线</li>
<li><strong><code>groove</code>线槽</strong></li>
</ul>
<blockquote>
<p><strong><code>text-decoration-style</code>有wavy 而 <code>border-style</code> 有 groove</strong></p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">color</span>: <span class="hljs-number">#00FF7F</span>;<br><span class="hljs-comment">/* 特殊属性 设置当前边框颜色为color颜色值 */</span><br><span class="hljs-comment">/*color颜色变化 border-color的值也会跟着变化*/</span><br><span class="hljs-attribute">border-color</span>: currentcolor;<br></code></pre></td></tr></table></figure>

<h4 id="2-5-2边框圆角"><a href="#2-5-2边框圆角" class="headerlink" title="2.5.2边框圆角"></a>2.5.2边框圆角</h4><p><code>border-radius:</code></p>
<p><strong>！！！注意：border-radius最多可以接受八个属性值</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 可以接收多个属性值 1-8个 */</span><br><span class="hljs-comment">/* 一个值四个角都一样 */</span><br><span class="hljs-comment">/* 两个值参照对角 即对角一样值*/</span><br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span>;<br><span class="hljs-comment">/* 三个值 左上 右上 右下 剩下一个参照对角 20px */</span><br> <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span> <span class="hljs-number">50px</span>;<br><br><span class="hljs-comment">/*八个值的情况*/</span><br><span class="hljs-comment">/*用 /号隔开 左边代表横轴 右边代表纵轴*/</span><br><span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span> <span class="hljs-number">50px</span> <span class="hljs-number">20px</span> / <span class="hljs-number">10px</span> <span class="hljs-number">20px</span> <span class="hljs-number">50px</span> <span class="hljs-number">20px</span>;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60e82b325132923bf8df0268.jpg" srcset="/blog/img/loading.gif" lazyload alt="横轴和纵轴"></p>
<p><strong>使用圆角边框画半圆</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css">	<span class="hljs-comment">/* 使用长方形画半圆 */</span><br><span class="hljs-selector-class">.div5</span>&#123;<br>	<span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>	<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;<br>	<span class="hljs-attribute">background-color</span>: lightseagreen;<br>	<span class="hljs-comment">/* 椭圆 */</span><br>	<span class="hljs-comment">/* 可以通过 / 设置横轴和纵轴的半径 */</span><br>	<span class="hljs-comment">/* border-radius: 50%/50%; */</span><br>    <span class="hljs-comment">/*设置 左上 右上圆角边框 下面两个边不设置*/</span><br>	<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">100px</span> <span class="hljs-number">100px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;<br>	&#125;<br></code></pre></td></tr></table></figure>

<h3 id="2-6-列表样式"><a href="#2-6-列表样式" class="headerlink" title="2.6 列表样式"></a>2.6 列表样式</h3><p><strong>用于设置ul和ol的左边的标志的样式</strong></p>
<p><code>list-style</code>是三个属性合一：<code>list-style-type</code>、<code>list-style-position</code>、<code>list-style-image</code></p>
<ol>
<li><strong><code>list-style-type</code>设置左边标志的样式</strong></li>
</ol>
<ul>
<li><code>none</code>去掉前面的符号</li>
<li><code>disc</code>实心圆</li>
<li><code>circle</code>空心圆</li>
<li><code>square</code>实心矩形</li>
<li><code>decimal</code>十制进的数值表示 </li>
<li><code>decimal-leading-zero</code>以0开始的十进制去表示 ，如<code>00,01</code>等</li>
<li><code>lower-alpha</code>小写英文字线</li>
<li><code>upper-alpha</code>大写英文字线</li>
<li><code>lower-roman</code>小写罗马文</li>
<li><code>upper-roman</code>大写罗马文</li>
</ul>
<ul>
<li><p><strong><code>cjk-earthly-branch</code>使用十二地支来记数</strong></p>
<p>十二地支曰：子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥。</p>
</li>
<li><p><strong><code>cjk-heavenly-stem</code>使用十天干来记数</strong></p>
<p>十天干：甲、乙、丙、丁、戊、己、庚、辛、壬、癸</p>
</li>
</ul>
<ol start="2">
<li><p><strong><code>list-style-position</code>设置符号的定位</strong></p>
<ul>
<li><code>outside</code>默认值，符号在内容的外边</li>
<li><code>inside</code>符号在内容的里面</li>
</ul>
<blockquote>
<p><strong>如果设置了<code>list-style-type:none</code>则上面的属性是看不到效果的</strong></p>
</blockquote>
</li>
<li><p><strong><code>list-style-image</code>使用指定的图片来作为列表项的符号</strong></p>
</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">list-style-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./img/01.png</span>)<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="2-7表格样式"><a href="#2-7表格样式" class="headerlink" title="2.7表格样式"></a>2.7表格样式</h3><h4 id="2-7-1单元格间距的处理"><a href="#2-7-1单元格间距的处理" class="headerlink" title="2.7.1单元格间距的处理"></a>2.7.1单元格间距的处理</h4><ol>
<li><p>**<code>border-collapse</code>**代表表格单元格与单元格之间的处理关系，它有2个属性值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">border-collapse</span>: collapse;  <span class="hljs-comment">/*表格合并 无间隙*/</span><br></code></pre></td></tr></table></figure>

<ul>
<li>**<code>separate</code>**分离(默认样式)，这一个属性会使表格的单元格处理分离状态</li>
<li><code>collapse</code>结合，这个时候表格之间是没有缝隙的</li>
</ul>
</li>
<li><p><strong><code> border-spacing</code>**当单元处理于<code>separate</code>分离状态的时候（</strong><code>collapse</code>时无效**），我们就可以通过这个属性去设置单元格之间的间距</p>
</li>
</ol>
<hr>
<h3 id="2-8-7-9重点：计数器"><a href="#2-8-7-9重点：计数器" class="headerlink" title="2.8 !!!7-9重点：计数器"></a>2.8 !!!7-9重点：计数器</h3><ol>
<li><p><code>counter-reset</code>重置一个计数器</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">counter-reset</span>:计数器名 初始值;<br><span class="hljs-attribute">counter-reset</span>:aaa <span class="hljs-number">0</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><strong>如果不设置初始值 ，则默认就是0</strong></p>
</blockquote>
</li>
<li><p><code>counter-increment</code>设置计数器的自增长量</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">counter-increment</span>:计数器名 增量;<br><span class="hljs-attribute">counter-increment</span>:aaa <span class="hljs-number">1</span>;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>如果不设置增量，则默认就是1</p>
</blockquote>
</li>
<li><p><code>counter(计数器名)</code>从计数器里面拿出这个值</p>
<p>这个属性只能在<code>::before/::after</code>里面结合<code>content</code>属性去使用</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-pseudo">::before</span>&#123;<br>    <span class="hljs-attribute">content</span>:<span class="hljs-built_in">counter</span>(aaa);<br>&#125;<br></code></pre></td></tr></table></figure>

</li>
</ol>
<h4 id="2-8-1计数器的使用步骤如下"><a href="#2-8-1计数器的使用步骤如下" class="headerlink" title="2.8.1计数器的使用步骤如下"></a><strong>2.8.1计数器的使用步骤如下</strong></h4><ol>
<li>你要对谁计数，那么<code>counter-reset</code>就设置在这个元素的外层（<strong>父容器</strong>）</li>
<li>你要对谁计数，那么<code>counter-increment</code>就设置在这个元素的上面（<strong>被计数的标签</strong>）</li>
<li>你要把内容显示在哪里，你就在这个元素上面使用<code>::before</code>或<code>::after</code>去追加counter(计数器)</li>
</ol>
<h4 id="2-8-2案例–作业"><a href="#2-8-2案例–作业" class="headerlink" title="2.8.2案例–作业"></a><strong>2.8.2案例–作业</strong></h4><p><strong>实现效果：</strong></p>
<p><img src="https://pic.imgdb.cn/item/60e8326d5132923bf8f7c488.jpg" srcset="/blog/img/loading.gif" lazyload alt="作业效果"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>作业-自定义列表数字<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css">.</span><br><span class="css">			<span class="hljs-comment">/* 第一层 */</span></span><br><span class="css">			<span class="hljs-selector-class">.container</span>&#123;</span><br><span class="css">                <span class="hljs-comment">/*父容器设置计数器 aaa*/</span></span><br><span class="css">				<span class="hljs-attribute">counter-reset</span>: aaa;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">li</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">list-style</span>: none;</span><br><span class="css">                 <span class="hljs-comment">/*被计数的标签容器进行计数 每次增长1*/</span></span><br><span class="css">				<span class="hljs-attribute">counter-increment</span>: aaa <span class="hljs-number">1</span>;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">::before</span>&#123;</span><br><span class="css">                <span class="hljs-comment">/*在指定区域显示*/</span></span><br><span class="css">				<span class="hljs-attribute">content</span>: <span class="hljs-built_in">counter</span>(aaa)<span class="hljs-string">&quot;.&quot;</span>;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-comment">/* 第一层结束 */</span>	</span><br><span class="css">			<span class="hljs-comment">/* 第二层开始 */</span></span><br><span class="css">			<span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">li</span>&gt;<span class="hljs-selector-tag">ul</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">list-style</span>: none;</span><br><span class="css">				<span class="hljs-attribute">counter-reset</span>: bbb;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">li</span>&gt;<span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">counter-increment</span>: bbb <span class="hljs-number">1</span>;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">li</span>&gt;<span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">::before</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">content</span>: <span class="hljs-built_in">counter</span>(aaa)<span class="hljs-string">&quot;.&quot;</span><span class="hljs-built_in">counter</span>(bbb);</span><br><span class="css">			&#125;		</span><br><span class="css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>				第一项<br>				<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第二小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>				第二项<br>				<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第二小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>				第三项<br>				<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第一小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第二小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>					<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>第三小项<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>				<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>			<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="2-9元素透明度"><a href="#2-9元素透明度" class="headerlink" title="2.9元素透明度"></a>2.9元素透明度</h3><p><strong>透明色：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"> <span class="hljs-comment">/* 设置透明度*/</span><br><span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0.3</span>);  <span class="hljs-comment">/*alpha*/</span><br><span class="hljs-comment">/*设置透明*/</span><br><span class="hljs-attribute">background-color</span>:transparent;<br></code></pre></td></tr></table></figure>

<p><strong>上面两个是透明色</strong></p>
<p><strong>元素透明使用<code>opacity</code>(取值[0,1])会是整个容器内的元素都透明</strong></p>
<p>！！！注意这个属性存在兼容性问题，<strong>IE9以下不支持</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.img1</span>&#123;<br>    <span class="hljs-attribute">opacity</span>:<span class="hljs-number">0.5</span>;    <span class="hljs-comment">/*W3C标准*/</span><br>    <span class="hljs-comment">/*低版本设置方法*/</span><br>    <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">alpha</span>(opacity=<span class="hljs-number">50</span>);   <span class="hljs-comment">/*低版本IE兼容*/</span><br>    <span class="hljs-comment">/*opacity,它的取值是0~100，0代表完全透明，100代表完全不透明*/</span><br>&#125;<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="2-10-元素的隐藏与显示"><a href="#2-10-元素的隐藏与显示" class="headerlink" title="2.10 元素的隐藏与显示"></a>2.10 元素的隐藏与显示</h3><ul>
<li><code>visibility</code>(取值：visible、hidden)</li>
<li><code>display</code>(取值：block、none……)</li>
</ul>
<p><strong>两者的区别：</strong></p>
<ol>
<li><p><code>visibility</code>隐藏后会占位，display隐藏后不占位</p>
</li>
<li><p><code>visibility</code><strong>不具有诛连性</strong>，当父容器设置隐藏后，子元素可以通过设置<code>visible</code>属性值进行显示</p>
<p><code>display</code> <strong>具有诛连性</strong>，父容器设置隐藏后，子元素无法通过设置<code>display:block</code>显示</p>
</li>
</ol>
<hr>
<h3 id="2-11-鼠标光标样式"><a href="#2-11-鼠标光标样式" class="headerlink" title="2.11 鼠标光标样式"></a>2.11 鼠标光标样式</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 手指 */</span><br><span class="hljs-attribute">cursor</span>: pointer;<br><span class="hljs-comment">/* 等待 */</span><br><span class="hljs-attribute">cursor</span>: wait;<br><span class="hljs-comment">/* 帮助 */</span><br><span class="hljs-attribute">cursor</span>: help;<br><span class="hljs-comment">/* 重新设置大小 水平方向*/</span><br><span class="hljs-attribute">cursor</span>: row-resize;<br><span class="hljs-comment">/* 左右方向 设置大小*/</span><br><span class="hljs-attribute">cursor</span>: ew-resize;<br><span class="hljs-comment">/* 东北 右上 */</span><br><span class="hljs-attribute">cursor</span>: ne-resize;			<br><span class="hljs-comment">/* 文本输入光标 */</span><br><span class="hljs-attribute">cursor</span>: text;			<br><span class="hljs-comment">/* 使用自定义图标 后面的default 用于处理某些浏览器或者图片加载失败的情况*/</span><br><span class="hljs-comment">/* 图片过大无法显示 */</span><br><span class="hljs-attribute">cursor</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./img/favicon.ico</span>),default;<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="2-12盒子阴影"><a href="#2-12盒子阴影" class="headerlink" title="2.12盒子阴影"></a>2.12盒子阴影</h3><p><strong>盒子阴影有六个取值</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* x轴偏移量 y轴偏移量 模糊度 扩散度 颜色 阴影位置(inset、outset) */</span><br><span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">30px</span> <span class="hljs-number">10px</span> lightpink inset;<br></code></pre></td></tr></table></figure>

<p><strong>！！！注意：默认为外部阴影，如果主动设置<code>outset</code>外部阴影 则不显示</strong></p>
<blockquote>
<p><strong><code>box-shadow</code>这个属性值与文本阴影<code>text-shadow</code>相比，除了多了阴影扩散度以及内外阴影设置这2个属性以外，还有一个最大的区别就是盒子阴影<code>box-shadow</code>可以设置多阴影</strong></p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/60e95bd15132923bf8375282.jpg" srcset="/blog/img/loading.gif" lazyload alt="多阴影"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*中间的绿色方块是主方块 其他是四个阴影*/</span><br><span class="hljs-selector-class">.div1</span>&#123;<br>	<span class="hljs-attribute">position</span>: relative;<br>	<span class="hljs-attribute">margin-top</span>: <span class="hljs-number">200px</span>;<br>	<span class="hljs-attribute">margin</span>: <span class="hljs-number">200px</span> auto;<br>	<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;<br>	<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;<br>	<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#008521</span>;<br>	<span class="hljs-comment">/* 设置四个阴影 */</span><br>	<span class="hljs-attribute">box-shadow</span>: -<span class="hljs-number">100px</span> -<span class="hljs-number">100px</span> <span class="hljs-number">0px</span> blue,<br>	<span class="hljs-number">100px</span> -<span class="hljs-number">100px</span> <span class="hljs-number">0px</span> red,<span class="hljs-number">100px</span> <span class="hljs-number">100px</span> <span class="hljs-number">0px</span> pink,-<span class="hljs-number">100px</span> <span class="hljs-number">100px</span> <span class="hljs-number">0px</span> palevioletred;<br>&#125;<br></code></pre></td></tr></table></figure>



<hr>
<h2 id="3-盒子模型"><a href="#3-盒子模型" class="headerlink" title="3.盒子模型"></a>3.盒子模型</h2><p><strong>常见布局</strong></p>
<pre><code class=" mermaid">graph TD
A[布局layout]--&gt;B[流式布局]
B--&gt;B1[标准流]
B1--&gt;B11[盒子模型]
B1--&gt;B12[元素类型]
B--&gt;B2[脱流]
B2--&gt;B21[浮动]
B2--&gt;B22[定位]

A--&gt;C[弹性布局]
A--&gt;D[响应式布局]
A--&gt;E[自适应布局]
</code></pre>

<h3 id="3-1-margin-auto的理解"><a href="#3-1-margin-auto的理解" class="headerlink" title="3.1 !!margin:auto的理解"></a>3.1 !!<code>margin:auto</code>的理解</h3><p>常常使用<code>margin:auto</code>对块级元素进行左右居中，<code>margin:auto</code>是由四个值合成。</p>
<ol>
<li>把一个盒子的<code>margin-left</code>设置为 <code>auto</code>它会一直往右跑，直到边界。</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">margin-left</span>: auto;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60ea422e5132923bf8cc14e0.jpg" srcset="/blog/img/loading.gif" lazyload alt="盒子居右"></p>
<ol start="2">
<li>再把盒子的<code>margin-right</code>设置为 <code>auto</code>它会往左跑，然后居中。</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">margin-right</span>: auto;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60ea42ca5132923bf8cf0a4d.jpg" srcset="/blog/img/loading.gif" lazyload alt="居中"></p>
<ol start="3">
<li><p><code>margin-left</code>和 <code>margin-right</code>两个属性合并为<code>margin:0 auto</code>(<strong>0代表上下间距为0px，0可以不带单位</strong>)</p>
</li>
<li><p>默认<code>margin-top</code>,<code>margin-bottom</code>为0px，而<code>margin-top:auto</code>也为0px，所以两个属性可以合并为<code>margin:auto auto</code></p>
</li>
<li><p><strong>进一步合并<code>margin:auto auto</code>后为<code>margin:auto</code></strong></p>
</li>
</ol>
<h3 id="3-2-margin的穿透问题"><a href="#3-2-margin的穿透问题" class="headerlink" title="3.2 !!! margin的穿透问题"></a>3.2 !!! <code>margin</code>的穿透问题</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>margin的穿透问题<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span><br><span class="css">		    <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">		        <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">		        <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">		        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">		    &#125;</span><br><span class="css">		    <span class="hljs-selector-class">.small-box</span>&#123;</span><br><span class="css">		        <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">		        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">		        <span class="hljs-attribute">background-color</span>: lightseagreen;</span><br><span class="css">		        <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">50px</span>;</span><br><span class="css">                <span class="hljs-comment">/*此处的margin-top有bug*/</span></span><br><span class="css">		        <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">80px</span>;</span><br><span class="css">		    &#125;</span><br><span class="css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>		    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">想要得到的效果</th>
<th align="center">实际效果</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/60ec254f5132923bf8589e1a.jpg" srcset="/blog/img/loading.gif" lazyload alt="想要的"></td>
<td align="center"><img src="https://pic.imgdb.cn/item/60ec25775132923bf8593ec1.jpg" srcset="/blog/img/loading.gif" lazyload alt="实际的效果"></td>
</tr>
</tbody></table>
<p><strong>发现小盒子的<code>margin-top</code>并没有生效，而是父盒子的<code>margin-top</code>生效了，这就是<code>margin</code>穿透问题</strong></p>
<p><strong>解决方法：</strong></p>
<ol>
<li>设置父容器的顶部边框或上内间距–(<strong>W3C官方解决方法</strong>)</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid black;<br><span class="hljs-comment">/*或者*/</span><br><span class="hljs-attribute">padding-top</span>:<span class="hljs-number">1px</span>;<br></code></pre></td></tr></table></figure>

<ol start="2">
<li>设置父容器的<code>overflow</code>–(<strong>CSS hack</strong>)</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">overflow</span>: auto;<br></code></pre></td></tr></table></figure>

<h3 id="3-3-margin的折叠问题"><a href="#3-3-margin的折叠问题" class="headerlink" title="3.3 !!!margin的折叠问题"></a>3.3 !!!<code>margin</code>的折叠问题</h3><p>当两个盒子上下排列时，上方盒子设置<code>margin-bottom</code>下方盒子设置<code>margin-top</code>这两个只有值大的那个生效。</p>
<p><img src="https://pic.imgdb.cn/item/60ed6b505132923bf85f08da.jpg" srcset="/blog/img/loading.gif" lazyload alt="margin折叠问题"></p>
<p>通过上图可以看到两个盒子的<code>margin</code>重叠在了一起</p>
<h4 id="3-3-1-解决方法"><a href="#3-3-1-解决方法" class="headerlink" title="3.3.1 解决方法"></a>3.3.1 解决方法</h4><ul>
<li>在两个盒子的外面再套一个盒子</li>
</ul>
<h3 id="3-3-padding内间距"><a href="#3-3-padding内间距" class="headerlink" title="3.3 padding内间距"></a>3.3 padding内间距</h3><blockquote>
<p><strong>一个盒子的外间距必然是另一个盒子的内间距</strong></p>
</blockquote>
<p>它也有一个综合属性 padding 用于简写，它后面也接收1~4个属性值，按“上，右，下，左”的顺序来设置（以时针方向，按顺时间的12点开始转一圈），这一点与我们之前的 margin 保持一致！</p>
<h2 id="4-元素类型-重点"><a href="#4-元素类型-重点" class="headerlink" title="4.!!!元素类型(重点)"></a>4.!!!元素类型(重点)</h2><p>上面的盒子模型是标准的布局规范，也是标准盒子模型，但是页面上面必不是所有的元素都是标准的盒子，它会根据元素的类型来区分，总体来说可以分为三种元素类型</p>
<pre><code class=" mermaid">graph TD
A[元素类型]--&gt;B[块级元素]
A--&gt;C[行内元素]
A--&gt;D[行内块级元素]
</code></pre>

<h3 id="4-1块级元素"><a href="#4-1块级元素" class="headerlink" title="4.1块级元素"></a>4.1块级元素</h3><p>块级元素是页面上面使用得最为频繁的一种元素，它遵守的是标准盒子模型，它的表现形式为<code>display:block</code>,常见的块级标签有<code>div,h1~h6,p,table,ul,li</code>等。块级元素具备如下几个特征</p>
<ol>
<li>块级元素可以通过<code>width/height</code>来设置宽度与高度</li>
<li>块级元素的宽度默认是父级元素的100%<strong><u>(默认属性值为<code>auto</code>,不是<code>100%</code></u></strong>)，高度为0，由里面的内容来撑高</li>
<li>块级元素独占一行</li>
<li>块级元素的左右居中使用是在自身的元素上面添加<code>margin:auto</code></li>
<li>块级元素遵守标准的盒子盒子模型规范，它的<code>margin</code>与 <code>padding</code>正常</li>
</ol>
<h3 id="4-2行内元素"><a href="#4-2行内元素" class="headerlink" title="4.2行内元素"></a>4.2行内元素</h3><p>行内元素也是页面上面必不可少的一种元素，它的表现形式为<code>display:inline</code>,常见的行内标签有<code>a,label,span</code>。行内元素的特点如下</p>
<ol>
<li><p>行内元素不能够通过<code>width/height</code>来设置元素的宽度与高度</p>
</li>
<li><p>行内元素的宽度默认不是100%，由里面的内容来撑开宽度与高度</p>
</li>
<li><p>行内元素默认排在同一行</p>
</li>
<li><p>行内元素的居中是在其外层的块级元素<strong>或行内块级元素</strong>上面设置<code>text-align:center</code></p>
</li>
<li><p>行内元素不遵守标准的盒子模型规范，它只有<code>margin-left</code>与<code>margin-right</code>，<strong>没有<code>margin-top</code>与<code>margin-bottom</code>**。<code>padding-left/padding-right</code>是正常的，</strong><u>但是<code>padding-top/padding-bottom</code>只能撑开自身，撑不开外边的元素</u>**</p>
</li>
<li><p>行内元素如果在代码里面换行了，会在页面上面呈现出一个空格位</p>
<p><strong>解决办法</strong></p>
<ul>
<li>代码不换行</li>
<li>在外层的盒子上面设置<code>font-size:0</code>，然后再到内部的子级元素上面恢复<code> font-size:16px</code></li>
<li>在外层的盒子上面设置<code>letter-spacing:-1em</code>，然后在子级元素上面恢复<code>letter-spacing:0</code></li>
</ul>
</li>
<li><p><strong>所有的文字都是行内元素</strong></p>
</li>
<li><p>单行的行内元素如果需要在父级块级元素中垂直居中，父级设置<code>line-height</code>与<code>height</code>保持一致</p>
</li>
<li><p>伪元素追加的内容属于行内元素，不能直接设置宽高</p>
</li>
</ol>
<h3 id="4-3行内块级元素"><a href="#4-3行内块级元素" class="headerlink" title="4.3行内块级元素"></a>4.3行内块级元素</h3><p>所有的表单标签<code>input</code>都是行内块级元素，它的表现为<code>display:inline-block</code></p>
<blockquote>
<p><strong>图片本身是<code>inline</code>，但是它表现的特征是<code>inline-block</code></strong></p>
</blockquote>
<ol>
<li><p>行内块级元素默认的大小还是由内容去撑开的，可以通过<code>width/height</code>来设置大小</p>
</li>
<li><p>行内块级元素默认也是排在同一行的</p>
</li>
<li><p>行内块级元素的居中与行内一致，都是在其外层的块级元素<strong>或行内块级元素</strong>上面设置<code>text-align:center</code></p>
</li>
<li><p>行内块级元素遵守标准的盒子模型规范，<code>margin/padding</code>正常</p>
</li>
<li><p>行内块级元素如果在代码里面换行了，也会在页面上面有一个空格位 (解决方法同行内元素)</p>
</li>
<li><p>行内块级元素撑高外边盒子的高度的时候，底部默认会多出3px</p>
<p><strong>解决办法</strong></p>
<ul>
<li>把这个元素转换成块级元素</li>
<li><strong>在当前的行内块级元素上面设置<code>vertical-align:middle</code></strong></li>
</ul>
</li>
<li><p>单行的行内块级元素如果需要在父级元素中垂直居中，除了在父级设置<code>line-height</code>与<code>height</code>保持一致，还需要在行内块级元素上面设置<code>vertical-align:middle</code></p>
</li>
</ol>
<h3 id="两个行内块级元素并列时的垂直对齐问题"><a href="#两个行内块级元素并列时的垂直对齐问题" class="headerlink" title="!!!两个行内块级元素并列时的垂直对齐问题"></a>!!!两个<u>行内块级元素</u>并列时的垂直对齐问题</h3><blockquote>
<p>两个行内块级元素并列时是以文字的基线对齐</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/60ed8c4b5132923bf803d2c0.png" srcset="/blog/img/loading.gif" lazyload alt="对齐"></p>
<p><strong>解决方法：两个行内块级元素中<u>都设置</u> <code>vertical-align: middle;</code></strong></p>
<p><strong>整合在一起</strong></p>
<table>
<thead>
<tr>
<th>特点</th>
<th>块级元素</th>
<th>行内元素</th>
<th>行内块级元素</th>
</tr>
</thead>
<tbody><tr>
<td><strong>宽高设置(width,height)</strong></td>
<td>可以设置</td>
<td>不能设置</td>
<td>可以设置</td>
</tr>
<tr>
<td><strong>默认宽高</strong></td>
<td>默认宽度100%，高度为0，由子元素撑开高度</td>
<td>由内容撑开宽高</td>
<td>由内容撑开宽高</td>
</tr>
<tr>
<td><strong>是否换行</strong></td>
<td>独占一行</td>
<td>不会换行，代码换行会留一个字符的空白</td>
<td>不会换行，代码换行会留一个字符的空白</td>
</tr>
<tr>
<td><strong>左右居中</strong></td>
<td>自身添加<code>margin:auto</code></td>
<td>父容器<code>text-align:center</code></td>
<td>父容器<code>text-align:center</code></td>
</tr>
<tr>
<td><strong><code>margin</code>和<code>padding</code></strong></td>
<td>正常</td>
<td><code>margin</code>只有左右没有上下，<code>padding</code>左右正常，上下无法撑开父容器</td>
<td>正常，但是撑开父容器高度时，底部会默认多出3px</td>
</tr>
<tr>
<td><strong>空格位</strong></td>
<td>无</td>
<td>代码换行有空格位</td>
<td>代码换行有空格位</td>
</tr>
<tr>
<td><strong>垂直居中</strong></td>
<td>弹性盒子</td>
<td>父级设置<code>line-height</code>与<code>height</code>保持一致</td>
<td>父级设置<code>line-height</code>与<code>height</code>保持一致，自身设置<code>vertical-align:middle</code></td>
</tr>
</tbody></table>
<blockquote>
<p><strong>所有的行内元素和行内块级元素都默认有一个<code>vertical-align</code></strong></p>
</blockquote>
<h3 id="补充：margin可以压缩元素宽度"><a href="#补充：margin可以压缩元素宽度" class="headerlink" title="补充：margin可以压缩元素宽度"></a>补充：<code>margin</code>可以压缩元素宽度</h3><ul>
<li><p><strong>块级元素的宽度默认填充父级元素的宽度，如无特殊需求就不要设置宽度为100%</strong></p>
</li>
<li><p>子级块级元素<strong>没有设置宽度</strong>时，可以使用<code>margin</code>来压缩宽度，充当<code>padding</code>的功能</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.div1</span>&#123;<br>       <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>       <span class="hljs-attribute">background-color</span>:aquamarine;<br>   &#125;<br>   <span class="hljs-selector-class">.div1-2</span>&#123;<br>       <span class="hljs-comment">/* 不设置宽度可以使用margin压缩 */</span><br>       <span class="hljs-comment">/* 设置100%后不能压缩了 */</span><br>       <span class="hljs-comment">/* width:100%; */</span><br>       <span class="hljs-comment">/*默认为width:auto*/</span><br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;<br>       <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">10px</span>;<br>       <span class="hljs-attribute">background-color</span>: bisque;<br>   &#125;<br></code></pre></td></tr></table></figure>

<hr>
<h2 id="5-流式布局–脱流"><a href="#5-流式布局–脱流" class="headerlink" title="5.流式布局–脱流"></a>5.流式布局–脱流</h2><blockquote>
<p><strong>标准流看特征，脱流看影响</strong></p>
</blockquote>
<h3 id="5-1浮动"><a href="#5-1浮动" class="headerlink" title="5.1浮动"></a>5.1浮动</h3><h4 id="5-1-1清除浮动"><a href="#5-1-1清除浮动" class="headerlink" title="5.1.1清除浮动"></a><strong>5.1.1清除浮动</strong></h4><blockquote>
<p>使用<code>clear</code>清除浮动后，它的<code>margin-top</code>就会出现误差，就不要使用<code>margin-top</code>了</p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/anruanba4181/article/details/101143539">清除浮动后margin-top失效问题</a></p>
<ol>
<li>使用clear清除非浮动元素时，该元素会移动到相关浮动元素外边界的下方，<code>margin-top</code>会被折叠</li>
<li>当应用于浮动元素时，它将元素的<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">外边界</a>移动到所有相关的浮动元素<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">外边框边界</a>的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置<strong>无法高于</strong>它之前的元素。</li>
</ol>
<ul>
<li>方法一：在浮动元素后面添加块元素，并在块元素中添加<code>clear:both</code></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.qc</span>&#123;<br>	<span class="hljs-comment">/* 清除左浮动 对右浮动无效*/</span><br> 	<span class="hljs-attribute">clear</span>: left;<br>	<span class="hljs-comment">/* 清除右浮动 */</span><br>	<span class="hljs-comment">/* clear: right; */</span><br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div1&quot;</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 需要在浮动元素后面添加 前面添加无法清除--&gt;</span><br>        <span class="hljs-comment">&lt;!-- &lt;div class=&quot;qc&quot;&gt;&lt;/div&gt; --&gt;</span><br>        <span class="hljs-comment">&lt;!-- 左浮动  浮动后父容器高度坍塌--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div2&quot;</span>&gt;</span>我是左浮动<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div3&quot;</span>&gt;</span>我是右浮动<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 多加一个块元素清除浮动 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;qc&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>方法二：父容器使用BFC的<code>overflow:auto</code>清除浮动</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.of</span>&#123;<br>    <span class="hljs-comment">/* 使用BFC清除 在父容器中添加*/</span><br>    <span class="hljs-attribute">overflow</span>: auto;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div1 of&quot;</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div2&quot;</span>&gt;</span>我是左浮动<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;div3&quot;</span>&gt;</span>我是右浮动<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>方法三：追加伪元素(原理和添加块元素相同)清除浮动(常用方法)</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 约定俗称的命名方法 使用after后追加*/</span><br><span class="hljs-selector-class">.clearfix</span><span class="hljs-selector-pseudo">::after</span>&#123;<br>     <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>     <span class="hljs-comment">/* 转换为块级元素 */</span><br>     <span class="hljs-attribute">display</span>: block;<br>     <span class="hljs-comment">/* 清除左右浮动 */</span><br>     <span class="hljs-attribute">clear</span>: both;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="5-2！！！脱流的影响"><a href="#5-2！！！脱流的影响" class="headerlink" title="5.2！！！脱流的影响"></a>5.2！！！脱流的影响</h3><p><img src="https://pic.imgdb.cn/item/60ef852a5132923bf835091c.png" srcset="/blog/img/loading.gif" lazyload alt="脱流的影响图"></p>
<ol>
<li>脱流后元素<u>不占布局位置(占内容位置)</u>，会造成父级元素的高度坍塌(无法撑开父元素)</li>
<li>浮动元素默认会高于标准流一个Z轴层级(<strong>只会影响后面的元素不会影响前面的元素</strong>)</li>
<li>脱流后块级元素的width不为<code>100%</code>，由里面的内容来撑开，但是仍然可以使用 <code>width/height</code>来设置宽度高度 </li>
<li>脱流后无视元素类型，全部转换为<code>display:block</code></li>
<li>脱流后的元素不能使用原来的标准流中的居中方法</li>
<li>脱流以后的元素会形成 BFC ，它不会存在<code>margin</code> 的穿透与折叠现象 </li>
</ol>
<h3 id="5-3浮动后的元素居中方案"><a href="#5-3浮动后的元素居中方案" class="headerlink" title="5.3浮动后的元素居中方案"></a>5.3浮动后的元素居中方案</h3><blockquote>
<p>  <strong>在浮动元素的外面套一个块级元素，块级元素的宽度设置为：<code>width:fit-content</code>，再设置<code>margin:auto</code>即可完成居中</strong></p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clearfix</span><span class="hljs-selector-pseudo">::after</span>&#123;<br>       <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>       <span class="hljs-attribute">display</span>: block;<br>       <span class="hljs-attribute">clear</span>: both;<br>   &#125;<br>   <span class="hljs-selector-class">.container</span>&#123;<br>       <span class="hljs-attribute">margin</span>:<span class="hljs-number">20px</span> auto;<br>       <span class="hljs-attribute">width</span>: fit-content; <span class="hljs-comment">/*设置宽度为自动适应内容*/</span><br>       <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;    <br>   &#125;<br>   <span class="hljs-selector-class">.container</span>&gt;<span class="hljs-selector-tag">ul</span>&gt;<span class="hljs-selector-tag">li</span>&#123;<br>       <span class="hljs-attribute">list-style</span>: none;<br>       <span class="hljs-attribute">float</span>: left;<br>       <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;<br>       <span class="hljs-attribute">background-color</span>: wheat;<br>       <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>;<br>       <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10px</span>;<br>   &#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container clearfix&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>菜单1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>菜单2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>菜单3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>菜单4<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>菜单5<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="5-5浮动元素占位问题"><a href="#5-5浮动元素占位问题" class="headerlink" title="5.5浮动元素占位问题"></a>5.5浮动元素占位问题</h3><ol>
<li><p><strong>浮动元素不占布局位置，但是占内容位置</strong></p>
<p><img src="https://pic.imgdb.cn/item/60eed0385132923bf8b5485d.jpg" srcset="/blog/img/loading.gif" lazyload alt="占位问题"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-comment">/*小盒子左浮*/</span></span><br><span class="css">    <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">        <span class="hljs-attribute">float</span>: left;</span><br><span class="css">    &#125;</span><br><span class="css">    <span class="hljs-selector-class">.box2</span>&#123;</span><br><span class="css">        <span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;</span><br><span class="css">        <span class="hljs-attribute">background-color</span>: lightskyblue;</span><br><span class="css">        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">26px</span>;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span><br>    天青色等烟雨，而我在等你<br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="5-6为什么说浮动是脱流"><a href="#5-6为什么说浮动是脱流" class="headerlink" title="5.6为什么说浮动是脱流"></a>5.6为什么说浮动是脱流</h3><p>流指的是页面在布局过来当中的两个方向（流向）</p>
<p><img src="https://pic.imgdb.cn/item/60eed1e65132923bf8bc9052.jpg" srcset="/blog/img/loading.gif" lazyload alt="流向"></p>
<p><strong>标准流</strong>：块级元素按照从上向下的块级流加载布局，行内元素与行内块级元素则按照从左右向的行内流加载</p>
<p><strong>脱流</strong>：浮动以后的元素没有按照之前标准流里面的块级流向与行内流向再进行布局排列，而是按照一种特殊的命令在排列</p>
</li>
</ol>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/HTML/">HTML</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/05/CSS%E7%AC%94%E8%AE%B0-2/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">CSS笔记-2</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/01/HTML%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">HTML笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
